<template>
<div></div>
  <!-- <vue-ueditor-wrap
    v-model="msg"
    :config="myConfig"
  @beforeInit="addCustomButtom"></vue-ueditor-wrap> -->
</template>
<script>
export default {
    data() {
        return {
            msg:
                '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 240,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                serverUrl: 'http://192.168.31.251:9092/posts/file',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: process.env.NODE_ENV === 'production' ? '/admin/static/UEditor/' : '/static/UEditor/',
                toolbars: [
                    ['bold', 'italic', 'fontborder', 'strikethrough', 'forecolor', 'backcolor', 'removeformat', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'],
                    [ 'fontsize', '|', 'cleardoc', 'undo', 'redo', 'simpleupload', 'fullscreen']
                ],
                enableContextMenu: false
            }
        }
    },
    methods: {
        addCustomButtom(editorId) {
            let that = this
            // 1. 自定义按钮
            window.UE.registerUI('test-button' + editorId, function (editor, uiName) {
                // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
                editor.registerCommand(uiName, {
                    execCommand: function () {
                        editor.execCommand(
                        )
                    }
                })
                // 创建一个 button
                var btn = new window.UE.ui.Button({
                    // 按钮的名字
                    name: uiName,
                    // 提示
                    title: '图片上传',
                    // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
                    cssRules: "background-image: url('/static/image/upload.png') !important;background-size: cover;background-color:red",
                    // 点击时执行的命令
                    onclick: function () {
                        // 这里可以不用执行命令，做你自己的操作也可
                        that.dialogVisible = true
                    }
                })
                // 当点到编辑内容上时，按钮要做的状态反射
                editor.addListener('selectionchange', function () {
                    console.log(22222222222)
                    var state = editor.queryCommandState(uiName)
                    if (state === -1) {
                        btn.setDisabled(true)
                        btn.setChecked(false)
                    } else {
                        btn.setDisabled(false)
                        btn.setChecked(state)
                    }
                })
                // 因为你是添加 button，所以需要返回这个 button
                return btn
            }, 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
        }
    }
}
</script>
<style scoped>

</style>
